import type { FC, PropsWithChildren } from 'react'

import { getEducationBackground, getTimeRange, initvalue } from '../../../common/utils'
import { useAccentColor } from '../../../common/hooks/useAccentColor';
import { context } from '../../../common/context';
import { SubTitle } from './style';

const Index: FC<PropsWithChildren< Partial<Resumes> & { style?: React.CSSProperties;item: Entries;name: Sections }>> = ({ children, style, item, name }) => {
  const { resume: { customization }, fontScale } = context

  const { spacing, applyAccentColor } = customization
  const { fontSize, spacingFactor } = spacing

  const [color] = useAccentColor(name)

  const titleFontSize = `${((fontSize || 0) * 0.5 + initvalue.fontSize + 0.5) * fontScale}pt`
  if (!item.startDate && !item.endDate && !item.subTitle && !item.educationBackground && !item.title) {
    return null
  }
  const dateStyle: any = {}
  if (applyAccentColor?.includes('dates')) {
    dateStyle.color = color
  }
  return (<SubTitle style={{
    display: 'grid',
    gridTemplateColumns: '1fr 1fr 1fr',
    fontWeight: '600',
    fontSize: titleFontSize,
    marginBottom: `${spacingFactor * 0.2 + 6}px`,
    ...style
  }}>
    {
      children || <>
        {
          item.startDate || item.endDate ? <div style={dateStyle}>{getTimeRange(item.startDate, item.endDate)}</div> : null
        }
        <div>
          {item.title}
        </div>

        <div>
          {item.subTitle}
          {
            item.educationBackground ? `（${getEducationBackground(item.educationBackground)}）` : null
          }
        </div>
      </>
    }
  </SubTitle>)
}
export default Index
